<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 黄悦 1982886884@qq.com
 * @LastEditTime: 2022-06-29 15:20:57
-->
<template>
  <div class="DataStatistics">
    <!-- 中国地图的容器 -->
    <!-- <div id="chinaMap" style="height:600px"></div> -->
    <!-- 下钻的容器 -->
    <div id="container" style="height:600px"></div>

  </div>
</template>

<script>
import Axios from 'axios';

  export default {
    data() {
      return {
        covidData:[],
        covidData_all:[],
      }
    },
    mounted() {
      //一般图标类的都在mounted中进行，因为created中没完成dom加载，只加载了data和methods的初始化
      //获取数据
      this.getCovidData();
    },
    methods: {
      loadMap() {
        let _this = this
        var data = Highcharts.geojson(Highcharts.maps['cn/china']),
          container = document.getElementById('container'),
          // Some responsiveness
          small = container.clientWidth < 400;
        // Set drilldown pointers
        Highcharts.each(data, function (d, i) {
          d.drilldown = [d.properties['adcode'],d.properties['drilldown']];
          let res = _this.covidData.filter(item => {
            return item.locationId == d.drilldown[0]
          })
          if(res.length == 0){
            // console.log(123);
            d.value = 0; // Non-random bogus data
          }else{
            //  console.log(res[0].value);
            d.value = res[0].value; // Non-random bogus data
          }
          // d.value = i; // Non-random bogus data
        });
        Highcharts.setOptions({
          lang: {
            drillUpText: '< 返回 全国 '
          }
        });
        // Instanciate the map
        Highcharts.mapChart(container, {
          chart: {
            events: {
              drilldown: function (e) {
                // console.log(e);
                if (!e.seriesOptions) {
                  // console.log(e.point.drilldown[0])
                  var chart = this,
                    mapKey = 'cn/' + e.point.drilldown[1],
                  // Handle error, the timeout is cleared on success
                  fail = setTimeout(function () {
                    if (!Highcharts.maps[mapKey]) {
                      chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                      fail = setTimeout(function () {
                        chart.hideLoading();
                      }, 1000);
                    }
                  }, 3000);
                  
                  // Show the spinner
                  // chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
                  // Load the drilldown map
                  //过滤出下钻的id下的city的数据 下钻的id e.point.drilldown[0]
                  let placeRes = _this.covidData_all.filter((item) => {
                    return item.locationId == e.point.drilldown[0]
                  })
                  $.getScript('https://data.jianshukeji.com/geochina/' + e.point.drilldown[1] + '.js', function () {
                    data = Highcharts.geojson(Highcharts.maps[mapKey]);
                    // Set a non-random bogus value
                    $.each(data, function (d,i) {
                      this.value = i;
                      // console.log(placeRes[0].cities);
                      let res = placeRes[0].cities.filter(item => {
                        // console.log(item.locationId,i.properties.areacode);
                        return item.locationId == i.properties.areacode
                      })
                      if (res.length == 0) {
                        this.value = 0; // Non-random bogus data
                      } else {
                        this.value = res[0].currentConfirmedCount; // Non-random bogus data
                      }
                    });
                    // Hide loading and add series
                    chart.hideLoading();
                    clearTimeout(fail);
                    chart.addSeriesAsDrilldown(e.point, {
                      name: e.point.name,
                      data: data,
                      dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                      },
                    });
                  });
                }
                this.setTitle(null, { text: e.point.name });
              },
              drillup: function () {
                this.setTitle(null, { text: '中国' });
              }
            }
          },
          title: {
            text: '中国疫情地图'
          },
          subtitle: {
            text: '中国',
            floating: true,
            align: 'right',
            x: -200,
            y: 50,
            style: {
              fontSize: '16px'
            }
          },
          legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
          },
          colorAxis: {
            min: 0,
            minColor: '#E6E7E8',
            max:100,
            maxColor: '#005645',
          },
          mapNavigation: {
            enabled: true,
            buttonOptions: {
              verticalAlign: 'bottom'
            }
          },
          plotOptions: {
            map: {
              states: {
                hover: {
                  color: '#EEDD66'
                }
              }
            }
          },
          series: [{
            data: data,
            name: '现有确诊',
            dataLabels: {
              enabled: true,
              format: '{point.properties.postal-code}'
            }
          }],
          drilldown: {
            //series: drilldownSeries,
            activeDataLabelStyle: {
              color: '#FFFFFF',
              textDecoration: 'none',
              textShadow: '0 0 3px #000000'
            },
            drillUpButton: {
              relativeTo: 'spacingBox',
              position: {
                x: -1100,
                y: 35
              },
              theme: {
                fill: 'white',
                'stroke-width': 1,
                stroke: 'silver',
                r: 0,
                states: {
                  hover: {
                    fill: '#bada55'
                  },
                  select: {
                    stroke: '#039',
                    fill: '#bada55'
                  }
					      }
				      }
            }
          }
        });
      },
      getCovidData(){
        Axios({
          url:'https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=f8b62832bfd1f9e8'
        }).then(res=>{
          // console.log(res);
          this.covidData_all=res.data.data;
          this.covidData=res.data.data.map((item)=>{
            return{
              name:item.provinceShortName,
              value:item.currentConfirmedCount,
              locationId: item.locationId
            }
          })
          //加载地图
          // this.loadChinaMap();
          this.loadMap();
        })
      }
    },
  }
</script>

<style scoped>

</style>
